使用 headless chrome进行测试

---

注:文章聚合了现在 headless chrome 介绍和使用方式

包含了三个部分

1. chrome 在 mac 上的安装和简单使用(来自官方)

2. 利用 selenium 的 webdrive 驱动 headless chrome(自己添加)

3. 利用Xvfb方式实现伪 headless chrome

概念

---

Headless模式解决了什么问题: 自动化工具例如 selenium 利用有头浏览器进行测试,面临效率和稳定性的影响,所以出现了 Headless Browser, 3年前，无头浏览器 PhantomJS 已经如火如荼出现了，紧跟着 NightmareJS 也成为一名巨星。无头浏览器带来巨大便利性：页面爬虫、自动化测试、WebAutomation...
用过PhantomJS的都知道，它的环境是运行在一个封闭的沙盒里面，在环境内外完全不可通信，包括API、变量、全局方法调用等。

So, Chrome59 推出了 headless mode，Chrome59版支持的特性，全部可以利用：
ES2017
ServiceWork(PWA测试随便耍)
无沙盒环境
无痛通讯&API调用
无与伦比的速度
...

chrome59 在 mac 上的安装和简单使用

现在有两个方式获取支持 headless 的 chrome
1.chrome 59 beta 版本:下载链接https://dl.google.com/chrome/...
2.安装安装黄金版 chrome,Chrome Canary :获取方式:

brew install Caskroom/versions/google-chrome-canary

3.简单的使用,我就以 chrome 59,演示一下:

用一个命令启动 Chrome 作为一个 Headless 服务:
./Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --remote-debugging-port=9222 --disable-gpu http://demo.testfire.net
   
或者切到google chrome 这个程序目录下
cd /Applications/Google Chrome.app/Contents/MacOS
然后执行
./Google\ Chrome  --headless --remote-debugging-port=9222 --disable-gpu http://demo.testfire.net

使用 Headless Chrome 抓取数据:

将要使用 Node.js 去连接我们运行中的 Chrome 实例。你需要确保你已经安装了 Node，才可以继续这个步骤。
让我们生成一个普通的 Node 项目，只有一个依赖那就是 Chrome Remote Interface 包，它可以帮助我们与 Chrome 沟通。然后我们创建一个空白的 index.js 文件。

mkdir my-headless-chrome && cd my-headless-chrome
npm init --yes
npm install --save chrome-remote-interface 
touch index.js

现在我们将要放一些代码到index.js。这个模板例子是由 Chrome 团队提供的。它指示这个浏览器导航到github.com，然后通过 client 里的 Network 属性捕获这个页面上所有的网络请求。

vi index.js
将代码复制到里面:
const CDP = require("chrome-remote-interface");

CDP(client => {
  // extract domains
  const { Network, Page } = client;
  // setup handlers
  Network.requestWillBeSent(params => {
    console.log(params.request.url);
  });
  Page.loadEventFired(() => {
    client.close();
  });
  // enable events then start!
  Promise.all([Network.enable(), Page.enable()])
    .then(() => {
      return Page.navigate({ url: "https://github.com" });
    })
    .catch(err => {
      console.error(err);
      client.close();
    });
}).on("error", err => {
  // cannot connect to the remote endpoint
  console.error(err);
});

最后启动我们的 Node 应用。
node index.js
我们可以看到 Chrome 发出的所有的网络请求，然而并没有一个实际的浏览器窗口。

$ node index.js
http://demo.testfire.net/
http://demo.testfire.net/style.css
http://demo.testfire.net/images/logo.gif
http://demo.testfire.net/images/header_pic.jpg
http://demo.testfire.net/images/pf_lock.gif
http://demo.testfire.net/images/gradient.jpg
http://demo.testfire.net/images/home1.jpg
http://demo.testfire.net/images/home2.jpg
http://demo.testfire.net/images/home3.jpg

这是一个非常棒的方式去查看加载了那些资源.
参考链接:https://github.com/yesvods/Bl...
ubuntu 系统下可以参考:https://medium.com/@dschnr/us...

利用 selenium 的 webdrive 驱动 headless chrome

鉴于以上的方式是利用 nodejs直接去操作 headless chrome

我提供一种方式,利用 selenium 的 webdrive 的 chromedriver驱动 chrome59进行 headless chrome 操作
利用 webdrive 的webdriver.ChromeOptions()方法,添加 headless 相关参数,从而驱动 headless的 chrome
下面的代码是进行一个 web 登录的过程:

#coding:utf-8
from selenium import webdriver

url = "http://demo.testfire.net"
chrome_options = webdriver.ChromeOptions()
chrome_options.add_argument('--headless')
chrome_options.add_argument('--disable-gpu')
driver = webdriver.Chrome(chrome_options=chrome_options,executable_path='/Users/xxxx/driver/chromedriver')

driver.get('http://demo.testfire.net')
driver.find_element_by_xpath('//*[@id="_ctl0__ctl0_LoginLink"]').click()
driver.find_element_by_xpath('//*[@id="uid"]').clear()
driver.find_element_by_xpath('//*[@id="uid"]').send_keys('admin')
driver.find_element_by_xpath('//*[@id="passw"]').send_keys('admin')
driver.find_element_by_xpath('//*[@id="login"]/table/tbody/tr[3]/td[2]/input').click()

print driver.current_url

最后 print 出登录成功的当前 url: http://demo.testfire.net/bank...

利用Xvfb方式实现伪 headless chrome

当浏览器不支持headless模式,可以利用python 的Xvfb实现伪 headless mode,Xvfb只是产生了一个虚拟窗口,浏览器只是没有在当前窗口显示.

简单的列举利用脚本

#coding:utf-8
from selenium import webdriver
from xvfbwrapper import Xvfb

xvfb = Xvfb(width=1280,height=720)
xvfb.start()
driver = webdriver.Chrome()
driver.get('http://demo.testfire.net')
cookies = driver.get_cookies()
print cookies
driver.close()
xvfb.stop()

参考文档:http://tobyho.com/2015/01/09/...